//
//  TabList.swift
//  tabSwitch
//
//  Created by Apple on 2021/6/11.
//

import SwiftUI

struct ScrollPreferenceKey: PreferenceKey {
    static var defaultValue: CGFloat = 0
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        
    }
}

struct TabList: View {
    @EnvironmentObject var modelData : TabItemsModelData
    @Binding var isScrolling: Bool
    var callback: TabSwitchCallBack?
    var list : [TabItem] {
        modelData.TabItemList
    }
    var width: CGFloat = UIScreen.main.bounds.width
    var height: CGFloat = UIScreen.main.bounds.height
    // 每行两个，宽度自适应
    var columnsFixed = [
        GridItem(.flexible()),
        GridItem(.flexible())
    ]
    
    
    /*
     Test State
     */
    @State var degree = 0.0
    @State var anchorX:CGFloat = 0.5
    @State var anchorY:CGFloat = 0.5
    @State var perspective:CGFloat = 1.0
    @State var itemH:CGFloat = 1.0
    @State var itemW:CGFloat = 1.0
    
    /*
     this is the target value
     */
    let target_degree = -57.24264
    let target_perspective = CGFloat.init(0.3380882)
    let target_anchorX = CGFloat.init(0.501754)
    let target_anchorY = CGFloat.init(1)
    let target_itemH = CGFloat.init(1.847561)
    let target_itemW = CGFloat.init(1.549383)
    
    let initial_degree = 0.0
    let initial_perspective = CGFloat.init(0.5)
    let initial_anchorX = CGFloat.init(0.5)
    let initial_anchorY = CGFloat.init(0.5)
    let initial_itemH = CGFloat.init(1.0)
    let initial_itemW = CGFloat.init(1.0)
    
    
    var body: some View {
//        GeometryReader{ outProxy in
//            ScrollView{
//                GeometryReader { inProxy in
//                    // 底层minY - 上层minY
//                    //                    ZStack{
//                    //                        Text("\(outProxy.frame(in: .global).minY-inProxy.frame(in: .global).minY)")
//                    //                        Text(isScrolling ? "true":"false")
//                    LazyVGrid(columns:columnsFixed,spacing: 20){
//                        ForEach(list, id:\.id) {item in
//                            TabListItem(logo: item.logo, title: item.title, url: item.url, image: item.image, id: item.id, callback: callback)
//                                .transition(.opacity)
//                                .animation(.default)
//                        }
//                    }
//                    .preference(key:ScrollPreferenceKey.self,value: inProxy.frame(in: .global).minY)
//
//                    .onPreferenceChange(ScrollPreferenceKey.self){_ in
//                        if outProxy.frame(in: .global).minY-inProxy.frame(in: .global).minY > 1{
//                            self.isScrolling = true
//                        }else if outProxy.frame(in: .global).minY-inProxy.frame(in: .global).minY < 1 {
//                            self.isScrolling = false
//                        }
//                    }
//                    //                }
//
//                }.frame(height: height)
//            }
//        }
        ZStack{
            /*
             测试控件代码
             */
//            VStack{
//                HStack{
//                    Text("degress:\(degree)")
//                    Slider.init(value: $degree, in: -90...0,label: {
//                    })
//                }
//                HStack{
//                    Text("perspective:\(perspective)")
//                    Slider.init(value: $perspective, in: 0.0...1.0, label: {
//                    })
//                }
//                HStack{
//                    Text("anchorX:\(anchorX)")
//                    Slider.init(value: $anchorX, in: 0.0...1.0, label: {
//                    })
//                }
//                HStack{ Text("anchorY:\(anchorY)")
//                    Slider.init(value: $anchorY, in: 0.0...1.0, label: {
//                    })
//                }
//                HStack{
//                    Text("itemH:\(itemH)")
//                    Slider.init(value: $itemH, in: 1.0...3.0, label: {
//                    })
//                }
//                HStack{
//                    Text("itemW:\(itemW)")
//                    Slider.init(value: $itemW, in: 1.0...3.0, label: {
//                    })
//                }
//
//
//
//
//
//
//            }.zIndex(2.0)
            
            GeometryReader{ outProxy in
                ScrollView{
                        //safari style
                        if modelData.displayMode{
                            ZStack{
                                ForEach(list, id:\.id) {item in
                                    TabListItem(logo: item.logo, title: item.title, url: item.url, image: item.image, id: item.id, callback: callback,wf:$itemW,hf:$itemH)
                                        .transition(.opacity)
                                        .animation(.default)
                                        .rotation3DEffect(
                                            .degrees(degree),
                                            axis: (x: 1.0, y: 0.0, z: 0.0),
                                            anchor: .init(x: anchorX, y: anchorY),
                                            anchorZ: /*@START_MENU_TOKEN@*/0.0/*@END_MENU_TOKEN@*/,
                                            perspective: perspective
                                        )
                                        .offset(x: 0, y: CGFloat(list.firstIndex(where: {$0.id == item.id})!*150))
                                }
                            }
                            .frame(width: width, height: height*(1.0+CGFloat.init(list.count)*0.3), alignment: .center)
                            .offset(x:0,y:-height*(1.0+CGFloat.init(list.count)*0.3)*0.3)
                            .background(GeometryReader{ inProxy in
                                    Color.clear
                                        .preference(key:ScrollPreferenceKey.self,value: inProxy.frame(in: .global).minY)

                                        .onPreferenceChange(ScrollPreferenceKey.self){_ in
                                            if outProxy.frame(in: .global).minY-inProxy.frame(in: .global).minY > 1{
                                                self.isScrolling = true
                                            }else if outProxy.frame(in: .global).minY-inProxy.frame(in: .global).minY < 1 {
                                                self.isScrolling = false
                                            }
                                        }
                                })
                        }
                        //chrome style
                        else{
                            LazyVGrid(columns:columnsFixed,spacing: 20){
                                ForEach(list, id:\.id) {item in
                                    TabListItem(logo: item.logo, title: item.title, url: item.url, image: item.image, id: item.id, callback: callback,wf:.constant(1.0),hf:.constant(1.0))
                                        .transition(.opacity)
                                        .animation(.default)
                                }
                            }
                            .background(GeometryReader{ inProxy in
                                Color.clear
                                    .preference(key:ScrollPreferenceKey.self,value: inProxy.frame(in: .global).minY)

                                    .onPreferenceChange(ScrollPreferenceKey.self){_ in
                                        if outProxy.frame(in: .global).minY-inProxy.frame(in: .global).minY > 1{
                                            self.isScrolling = true
                                        }else if outProxy.frame(in: .global).minY-inProxy.frame(in: .global).minY < 1 {
                                            self.isScrolling = false
                                        }
                                    }
                            })
                        }
                }
            }

        }.zIndex(1.0)
        .onAppear(perform: {
            withAnimation(.easeInOut(duration: 0.5), {
                self.degree = target_degree
                self.anchorY = target_anchorY
                self.anchorX = target_anchorX
                self.perspective = target_perspective
                self.itemW = target_itemW
                self.itemH = target_itemH
            })
        })
        .onDisappear(perform: {
            self.degree = initial_degree
            self.anchorY = initial_anchorY
            self.anchorX = initial_anchorX
            self.perspective = initial_perspective
            self.itemW = initial_itemW
            self.itemH = itemH
        })
        
    }
    func removeRows(at offsets: IndexSet) {
            modelData.TabItemList.remove(atOffsets: offsets)
    }
}
    




struct TabList_Previews: PreviewProvider {
    static var previews: some View {
        TabList(isScrolling: .constant(true)).environmentObject(TabItemsModelData())
    }
}
